<template>
  <div class="cluster0920">
    <div ref="chart" class="the-time-chart"></div>

    <div class="display_distances">
      <font color="white">{{target_index}}</font>
      <div v-for="item in display_distances">
        <template
          v-if="show_indexes.includes(item.index)"
        >[{{item.index}}]:{{item.angu?item.angu:"inf"}}|{{item.parr?item.parr:"inf"}}|{{item.perp?item.perp:"inf"}}|{{item.total?item.total:"inf"}}</template>
      </div>
    </div>
    <!-- <button class="copy" ref="copy">Copy</button> -->
  </div>
</template>
<script>
import axios from "axios";
import randomcolor from "randomcolor";
import Color from "color";
let clipboardjs = require("clipboard");

const libDP = require("../lib/Douglas-Peucker");
import * as echarts from "echarts";
// var echarts = require("echarts/lib/echarts");
// require("echarts/lib/chart/scatter");
// require("echarts/lib/chart/line");
// require("echarts/lib/chart/radar");
// require("echarts/lib/chart/custom");
// require("echarts/lib/chart/heatmap");
// require("echarts/lib/chart/effectScatter");
// require("echarts/lib/component/visualMap");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/tooltip");
// require("echarts/lib/component/title");
// require("echarts/lib/component/axis");
// require("echarts/lib/component/graphic");
// require("echarts/lib/component/legend");
// require("echarts/lib/component/brush");
// require("echarts/lib/component/toolbox");
// debugger
const MAP_IMAGES = {
  Vikendi:
    "http://n1-q.mafengwo.net/s16/M00/1F/16/CoUBUl6J6-WAfTq9ABN1dkMMLI4971.jpg#DihorOtok_Main",
  "Erangel (Remastered)":
    "http://n1-q.mafengwo.net/s16/M00/24/CD/CoUBUl6J8CGAZ8FWACwGssFmNzs911.jpg#Baltic_Main.jpg.jpg",
  Miramar:
    "http://b1-q.mafengwo.net/s16/M00/25/07/CoUBUl6J8DuABPwhAB3VGbsEWx0692.jpg#Desert_Main.jpg.jpg",
  Erangel:
    "http://n1-q.mafengwo.net/s16/M00/25/14/CoUBUl6J8E-AbIDmABcvo6NWiPE512.jpg#Erangel_Main.jpg.jpg",
  Sanhok:
    "http://m.tuniucdn.com/fb2/t1/G6/M00/F0/BC/Cii-TF781C2IcJj7AA590so7b_UAANa_AI4S9UADn3q184.jpg#Savage_Main.jpg.jpg"
};
const MAP_LENGTH_CENTIMETERS = {
  Vikendi: 612000,
  "Erangel (Remastered)": 816000,
  Miramar: 816000,
  Erangel: 816000,
  Sanhok: 408000
};

const MAP_NAME = "Sanhok";

export default {
  name: "Cluster0920",
  data() {
    return {
      display_distances: [],
      target_index: -1,
      show_indexes: [5, 7, 71, 73, 61, 48, 82, 83, 75, 79, 47]
    };
  },
  mounted() {
    let vue = this;
    let ele = this.$refs["chart"];
    let chart = echarts.init(ele, "", {
      renderer: "canvas"
    });
    const MapGameLength = MAP_LENGTH_CENTIMETERS[MAP_NAME];
    const MapSize = 1000;
    let _scale = MapSize / MapGameLength;
    // let vue = this;s

    this.ajaxGetData().then(async kdata => {
      kdata;
      // debugger;
      let lineSeries = kdata.lines.map(l => {
        return {
          type: "custom",
          coordinateSystem: "none",
          data: [[l.index]],
          renderItem: () => {
            let points = [
              [l.start.x, l.start.y],
              [l.end.x, l.end.y]
            ].map(e => e.map(v => v * _scale));
            // debugger;
            return {
              type: "group",
              children: [
                {
                  type: "polyline",
                  progressive: true,
                  shape: {
                    points: points,
                    smooth: 0
                  },
                  style: {
                    lineWidth: 2,
                    fill: "rgba(0,0,0,0)",
                    stroke: `rgba(255,255,255,0.8)`
                  }
                },
                {
                  type: "text",
                  position: [l.end.x, l.end.y].map(v => v * _scale),
                  style: {
                    text: String(l.index),
                    fill: "yellow"
                  }
                }
              ]
            };
          }
        };
      });
      let exampleSeries = {
        type: "scatter",
        data: [
          [0, 9000],
          [MapGameLength, MapGameLength / 4]
          // [90, MapGameLength],
          // [MapGameLength / 2, MapGameLength / 2],
          // [MapGameLength, MapGameLength]
        ]
      };
      let point0213data = await this.ajax210213PointData();
      // debugger;
      let series0213 = {
        type: "scatter",
        data: point0213data.map(dian => [dian.x, MapGameLength - dian.y]),
        itemStyle: {
          color: "red",
          opacity: 0.5
        },
        symbolSize: 8
      };
      let luodian210117data = await this.ajax210117luodianData();
      // debugger;
      let luodianQianwuSeries = {
        type: "scatter",
        data: luodian210117data.qianwu.map(dian => [
          dian.x,
          MapGameLength - dian.y
        ]),
        itemStyle: {
          color: "red",
          opacity: 0.5
        },
        symbolSize: 1
      };
      let luodianKaohouSeries = {
        type: "scatter",
        data: luodian210117data.kaohou.map(dian => {
          // debugger
          return [dian.x, MapGameLength - dian.y];
        }),
        itemStyle: {
          color: "blue",
          opacity: 0.1
        }
      };
      let safetyzonevalueData = await this.ajax210217SafetyZoneValueData();
      // debugger;
      let safetyzonevalueSeries = {
        type: "scatter",
        dimensions: [
          null,
          null,
          "safetyzone_value",
          "ranking",
          "is_gaoshou",
          "is_in_zone",
          "distance_to_city_type_a",
          "distance_to_city_type_b",
          "distance_to_city_type_c",
          "distance_to_city_type_d"
        ],
        data: safetyzonevalueData
          .filter(e => e.safetyzone_value)
          // .slice(0,2000)
          .map(e => {
            // debugger;
            return [
              e.luodian.x,
              MapGameLength - e.luodian.y,
              e.safetyzone_value,
              e.ranking,
              e.is_gaoshou,
              e.is_in_zone,
              e.distance_to_city_type_a,
              e.distance_to_city_type_b,
              e.distance_to_city_type_c,
              e.distance_to_city_type_d
            ];
          }),
        // emphasis: {
        //   itemStyle: {
        //     borderColor: "#333",
        //     borderWidth: 1
        //   }
        // },
        progressive: 2000,
        // silent: true,
        animation: false,
        //  blurSize:20
        // symbolSize: 3
        itemStyle: {
          borderWidth: 0,
          borderColor: "white",
          color: params => {
            debugger;
            if (!params.value[5]) {
              return "#017F00";
            }
            if (!params.value[6]) {
              return "#FFFF66";
            }
            if (!params.value[7]) {
              return "#FF9933";
            }
            if (!params.value[8]) {
              return "#C53834";
            }
            if (!params.value[9]) {
              return "#FF00FF";
            }
          }
          // opacity: 1
        }
      };
      let safetyZonesExample = await this.ajax210219circlesData();
      let safetyZonesExampleSeries = {
        type: "scatter",
        data: safetyZonesExample
          // .slice(0,2000)
          .map(e => {
            return [
              e.safetyZonePosition.x + 40000,
              MapGameLength - (e.safetyZonePosition.y + 40000),
              e.safetyZoneRadius
            ];
          }),
        itemStyle: {
          color: "rgba(0,0,0,0.05)",
          borderWidth: 5,
          borderColor: "white" || "#3399FF"
        },
        symbolSize: (value, params) => {
          // debugger
          return (value[2] * 2 * 1000) / MapGameLength;
        }
      };
      // debugger;

      chart.setOption({
        title: {
          text: ""
        },

        backgroundColor: "black" || "white",
        tooltip: {
          // trigger: "axis"
        },
        toolbox: {
          left: 20,
          feature: {
            dataZoom: {
              yAxisIndex: false
            },
            brush: {
              type: ["lineX", "clear"]
            }
          }
        },
        legend: {
          left: "center",
          data: []
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0
        },
        xAxis: [
          {
            type: "value",
            max: MapGameLength,
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            max: MapGameLength,
            splitLine: {
              show: false
            }
          }
        ],
        visualMap: [
          // {
          //   top: 10,
          //   right: 10,
          //   min: 0,
          //   max: 1,
          //   dimension: 5,
          //   seriesIndex: 1,
          //   inRange: {
          //     color: ["green", "yellow"], //是否在城市
          //     // symbol:['circle',"triangle"],
          //     // opacity: [1, 0],
          //     symbolSize: [5, 5]
          //     // colorLightness: [1, 1]
          //     // colorSaturation:[1,0]
          //   },
          //   pieces: [
          //     {
          //       gte: 1
          //     },
          //     {
          //       lte: 0
          //       // gt: 0
          //     }
          //   ],
          //   outOfRange: {
          //     color: ["blue", "red"]
          //   }
          // },
          // {
          //   min: 1,
          //   max: 100,
          //   dimension: 3,
          //   seriesIndex: 1,
          //   inRange: {
          //     // color: ["green", "yellow"], //是否在前五
          //     // symbol:['circle',"triangle"],
          //     // colorAlpha: [1, 0],
          //     colorAlpha: [0, 1]
          //     // symbolSize: [5, 5]
          //     // colorLightness: [0.5, 1]
          //     // colorSaturation:[1,0.5]
          //   },
          //   pieces: [
          //     {
          //       lte: 5
          //     },
          //     {
          //       gte: 6
          //     }
          //   ],
          //   outOfRange: {
          //     color: ["blue", "red"]
          //   }
          // }
        ],
        graphic: [
          {
            type: "image",
            id: "logo",
            right: 0,
            top: 0,
            z: -10,
            bounding: "raw",
            origin: [0, 5],
            style: {
              image: MAP_IMAGES[MAP_NAME],
              width: 1000,
              height: 1000,
              opacity: 0.8
            }
          },
          {
            type: "text",
            left: "0",
            top: "0",
            style: {
              fill: "#fff",
              // text: "Hieguin",
              font: "bold 26px Microsoft YaHei"
            }
          }
        ],
        series: [
          // ...lineSeries,
          exampleSeries,
          // safetyZonesExampleSeries
          safetyzonevalueSeries
          // series0213
          // luodianQianwuSeries,
          // luodianKaohouSeries
        ],

        brush: {
          toolbox: ["rect", "polygon", "keep", "clear"],
          // geoIndex:null,
          brushType: "rect",
          xAxisIndex: "all",
          yAxisIndex: "all"
        }
      });
      chart.on("brushEnd", param => {
        // debugger;
        if (!(param.areas && param.areas[0])) {
          return;
        }
        let range = param.areas[0].range.map(e => e.map(x => x / _scale));
        let text = JSON.stringify({
          x: range[0],
          y: range[1]
        });
        console.log(text);
        vue;
        let ClipboardJS = clipboardjs;

        let clipboard = new ClipboardJS(".copy", {
          text: () => {
            return text;
          }
        });
        vue.$refs.copy.click();
        clipboard.on("success", () => {
          // debugger
          clipboard.destroy();
        });
        // debugger;
      });
      // chart.dispatchAction({
      //   type: "brush",
      //   areas: [
      //     {
      //       brushType: "lineX",
      //       coordRange: ["2016-06-02", "2016-06-20"],
      //       xAxisIndex: 0
      //     }
      //   ]
      // });
      // chart.on("click", params => {
      //   if (params.componentType === "series") {
      //     // debugger;
      //     let index = params.data[0];
      //     let distRecords = kdata.distances[index];
      //     let displayed = distRecords
      //       .map((e, i) => {
      //         return {
      //           ...e,
      //           index: i
      //         };
      //       })
      //       .filter((e, i) => distRecords[i]);
      //     // debugger
      //     vue.display_distances = displayed;
      //     vue.target_index = index;
      //     // debugger;
      //   }
      // });
    });
  },
  methods: {
    ajaxGetData() {
      return new Promise(resolve => {
        axios
          .get(
            "http://m.tuniucdn.com/fb2/t1/G7/M00/01/E1/CkC9r19nfTGIeEzVAAacT6E71FAAABCwQDouNgABpxn80.json"
          )
          .then(axresp => {
            // debugger;
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajaxTraclusData() {
      const data0824Frogman = [
        "https://qimage.owhat.cn/prod/master/image/dfb19906-735e-4125-b311-ffdc3f8faa8c",
        "https://qimage.owhat.cn/prod/master/image/53f7232d-640e-4aae-a9f7-c35dfdc6abde",
        "https://qnm.hunliji.com/FtUPK5F2i17RPhMBsm5-BA4Wmo9-",
        "https://qnm.hunliji.com/FipEyRDnUbme1Cjp9Oykz0TsrnLG",
        "https://qnm.hunliji.com/Fo92XqaLiYp5LcbONNHRSxp8HjFW",
        "https://qnm.hunliji.com/FjpsWxdeYGxTE_5r86RrkNUlIs12",
        "https://qnm.hunliji.com/FiTJ2XhL_4j8bjSdK3-rK23p0cRl",
        "https://qnm.hunliji.com/FtRfqsI2fg_Rf1nhSygQdKKnsAPS",
        "https://qnm.hunliji.com/FuGlGJ-3DxVGHPYEnTTSTlS2uPjO",
        "https://qnm.hunliji.com/FqRAxl0ByvcQ5h7pCibO5HExkAJv",
        "https://qnm.hunliji.com/FhG72IAsljCdfYoa0HAruDZAI0To"
      ];
      return new Promise(resolve => {
        axios
          .get(data0824Frogman[0])
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajaxPartionData() {
      let partion =
        "https://qimage.owhat.cn/prod/master/image/e6662700-aed0-4dc2-8875-708cf866c94a";
      let partion_python =
        "https://qimage.owhat.cn/prod/master/image/1e71e94f-f0fe-452d-9197-89382dcc0e57";
      return new Promise(resolve => {
        axios
          .get(partion_python)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    //0909标记准备改?
    ajaxClusterData() {
      let partion =
        "https://qimage.owhat.cn/prod/master/image/e7350202-bf74-4d8a-9797-dfaae6dcb3db  ";
      return new Promise(resolve => {
        axios
          .get(partion)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax0830RawData() {
      let link =
        "https://qimage.owhat.cn/prod/master/image/49002b47-428f-4f86-9f71-3cfbd8b4d981";
      return new Promise(resolve => {
        axios
          .get(link)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax210117luodianData() {
      let partion =
        "http://m.tuniucdn.com/fb2/t1/G7/M00/04/F9/CkC9r2AEajWIWoCyABXGsyiNrzUAAC2qwGb_igAFcbL94.json";
      return new Promise(resolve => {
        axios
          .get(partion)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax210213PointData() {
      let points =
        "https://qimage.owhat.cn/prod/master/image/6010389d-ba1a-40a1-a868-bdc31cc6e636";
      points =
        "https://qimage.owhat.cn/prod/master/image/3e6efdb5-6169-4d32-b04b-14ac000cbbda";
      return new Promise(resolve => {
        axios
          .get(points)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax210217SafetyZoneValueData() {
      let points =
        "https://qimage.owhat.cn/prod/master/image/f36d3757-9fff-435c-87d6-3306b5e6bea5";
      points =
        "https://qimage.owhat.cn/prod/master/image/3d6129b1-3037-44db-b55d-c2f782fc061b";
      points =
        "https://qimage.owhat.cn/prod/master/image/b08af11a-debe-4f63-8376-7a00816523d1";
      points =
        "https://qimage.owhat.cn/prod/master/image/5d5ac2d2-ce4f-4762-b49e-fc84f2a94e5f";
      points =
        "https://qimage.owhat.cn/prod/master/image/8c68d1fc-3087-462d-bfa9-311b4e8f112d";
      points =
        "https://qimage.owhat.cn/prod/master/image/3ab25909-696d-44bc-9b30-05798ec155aa";
      return new Promise(resolve => {
        axios
          .get(points)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajax210219circlesData() {
      let link =
        "https://qimage.owhat.cn/prod/master/image/09cf23d9-6d4f-4364-8cfc-44a70e73b494";
      return new Promise(resolve => {
        axios
          .get(link)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.the-time-chart {
  width: 1000px;
  height: 1000px;
}
.cluster0920 {
}
.display_distances {
  position: absolute;
  display: none;
  bottom: 0;
  text-align: LEFT;
  color: aqua;
}
</style>